<template>
  <div class="md-page-forget">
    <div class="forget-container">
      <div class="forget-form">
        <div class="title">重置密码</div>

        <el-form class="form" ref="form" :model="request" :rules="rules">
          <el-form-item prop="phone" label="">
            <el-input v-model="request.phone" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item prop="code" label="">
            <el-input v-model="request.code" placeholder="请输入验证码">
              <span slot="append" @click="handlSendSms();">{{sendLabel}}</span>
            </el-input>
          </el-form-item>
          <el-form-item prop="pwd" label="">
            <el-input v-model="request.pwd" type="password" placeholder="请输入8-16位(大写字母+小写字母+数字)密码" />
          </el-form-item>
          <el-form-item prop="resPwd" label="">
            <el-input v-model="request.resPwd" type="password" placeholder="请再次输入8-16位(大写字母+小写字母+数字)密码" />
          </el-form-item>
        </el-form>

        <div class="desc">
          <el-checkbox v-model="isRead">
            我已阅读
            <span>
              <nuxt-link to="#">《***隐私政策》</nuxt-link>
              <nuxt-link to="#">《用户协议》</nuxt-link>
            </span>
          </el-checkbox>

          <nuxt-link to="#"></nuxt-link>
        </div>

        <el-button type="primary" class="btn-submit" @click="handleSubmit">重 置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MdPageForgetComponent',
  data () {
    return {
      isRead: false,
      request,
      rules: {
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        // uuid: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        pwd: [
          { required: true, message: '请输入8-16位(大写字母+小写字母+数字)密码', trigger: 'blur' },
          { min: 8, max: 16, message: '请输入8-16位(大写字母+小写字母+数字)密码', trigger: 'blur' }
        ],
        resPwd: [
          { required: true, message: '请再次输入8-16位(大写字母+小写字母+数字)密码', trigger: 'blur' },
          { min: 8, max: 16, message: '请再次输入8-16位(大写字母+小写字母+数字)密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (this.request.pwd !== value) {
                callback('两次输入密码不一致')
              }
              callback()
            }, trigger: 'blur'
          }
        ]
      },
      sendLabel: '获取验证码',
      sendTime: 0
    }
  },
  methods: {
    handleLoginSwitch () {
      this.loginSwitch = !this.loginSwitch
    },
    handleTabClick (item) {
      this.tabCurrent = item.value
    },
    async handlSendSms () {
      if (this.sendTime > 0) {
        return
      }

      if (!this.request.phone) {
        this.$message.warning('请输入手机号')
        return
      }

      try {
        const res = await this.$axios.post('auth/sendSms', {
          mobile: this.request.phone,
          userType: '01'
        })

        this.$message.success('验证码已发送到您手机，请注意查收')

        this.sendTime = 60

        this.waitSms()

        this.smsInterval = setInterval(() => {
          this.waitSms()
        }, 1000)
      } catch (error) {
        console.log(error)
      }
    },
    waitSms () {
      this.sendTime--
      if (this.sendTime === 0) {
        clearInterval(this.smsInterval)
        this.sendLabel = '重新获取验证码'
      } else {
        this.sendLabel = this.sendTime + '秒后重新获取'
      }
    },
    handleSubmit () {
      this.$refs.form.validate(async valid => {
        if (!valid) {
          return
        }

        try {
          if (!this.isRead) {
            this.$message.warning('请先阅读《隐私协议》《用户协议》')
            return
          }

          const params = {
            mobile: this.request.phone,
            password: this.request.resPwd,
            code: this.request.code,
            userType: '01'
          }

          await this.$axios.post('auth/resetPassword', params)

          this.$message.success('重置成功')

          setTimeout(() => {
            this.$router.push('/login')
          }, 1000)
        } catch (error) {
          console.log(error)
        }
      })
    }
  }
}
const request = {
  phone: null,
  code: null,
  uuid: null,
  pwd: null,
  resPwd: null
}
</script>

<style lang="scss" scoped>
.md-page-forget {
  width: 100%;
  box-sizing: border-box;

  .forget-container {
    width: 100%;
    height: calc(100vh - $md-header-height);
    // background-image: url('@/assets/img/login-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    .forget-form {
      width: 464px;
      height: 520px;
      position: fixed;
      top: 20%;
      right: 248px;
      z-index: 10;
      background-color: #fff;
      border-radius: 3px;
      padding: 27px 37px;

      .title {
        font-size: 22px;
        font-weight: bold;
        color: #1d2129;
        text-align: center;
      }

      ::v-deep .el-form {
        margin-top: 30px;
        .el-form-item:nth-child(2) {
          .el-form-item__content {
            .el-input {
              input {
                border-right: none !important;
              }
              .el-input-group__append {
                background: transparent !important;
                span {
                  color: $md-primary-color;
                  font-size: 14px;
                  cursor: pointer;
                }
              }
            }
          }
        }
      }

      .desc {
        display: flex;
        align-items: center;
        margin-top: 13px;
        .el-checkbox {
          .el-checkbox__label {
            font-size: 14px;
            color: #86909c;

            span {
              a {
                text-decoration: none;
                color: $md-primary-color;
              }
            }
          }
        }

        a {
          flex: 1;
          text-align: right;
          text-decoration: none;
          font-size: 14px;
          color: #86909c;
        }
      }

      .btn-submit {
        width: 100%;
        font-size: 16px;
        margin-top: 74px;
      }
    }
  }
}
</style>